<template>
  <div>
    <el-card>
      <div slot="header" :class="$style.header">
        <div :class="$style.search">
          <span>员工：</span>
          <el-input v-model="name" clearable @change="handleChange"></el-input>
        </div>
        <div :class="$style.search">
          <span>电话：</span>
          <el-input v-model="contact" clearable @change="handleChange"></el-input>
        </div>
        <el-button type="primary" @click="filterChange">
          搜 索
          <i class="el-icon-search"></i>
        </el-button>
        <!-- <div space></div> -->
        <el-button type="primary" @click="add()">添加员工</el-button>
      </div>
      <el-table :data="tableData" m-b-10>
        <el-table-column label="员工姓名">
          <template slot-scope="{row}">{{row.name}}</template>
        </el-table-column>
        <el-table-column label="员工电话" align="center">
          <template slot-scope="{row}">{{row.contact}}</template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button type="warning" size="mini" @click="edit(row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(row.id)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <BasePagination :max="maxPage" :now.sync="nowPage"></BasePagination>
      <Edit
        ref="Edit"
        :item="tableItem"
        v-if="showForm"
        @close="showForm=false"
        @getData="getData"
      />
    </el-card>
  </div>
</template>

<script>
import Edit from "./components/Edit";
import BasePagination from "@/components/BasePagination";

export default {
  components: {
    Edit,
    BasePagination
  },

  data() {
    return {
      tableItem: {},
      tableData: [
        {
          label: "员工姓名",
          prop: "name"
        },
        {
          label: "员工电话",
          prop: "contact"
        }
      ],
      showForm: false,
      name: "",
      contact: "",
      maxPage: 1,
      nowPage: 1
    };
  },
  created() {
    this.getData();
  },
  watch: {
    nowPage() {
      this.getData();
    }
  },

  methods: {
    init(to, from) {
      this.getData();
    },
    handleChange() {},
    getData() {
      this.$http
        .get("/Manage/Worker/lists", {
          params: {
            page: this.nowPage,
            rows: 10,
            keywords: this.name
          }
        })
        .then(res => {
          if (res.code === 1) {
            this.tableData = res.data.list;
            this.maxPage = res.data.page_total;
          }
        });
    },
    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1);
    },
    add() {
      this.tableItem = {};
      this.showForm = true;
    },
    edit(data) {
      this.tableItem = {...data};
      this.showForm = true;
    },
    del(data) {
      this.$confirm("确认删除?", "删除", {
        type: "error"
      })
        .then(() => {
          this.$http.post('/Manage/Worker/del',{
            id:data
          })
          .then(res=>{
            this.getData();
          })
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>
